<template>
<div>
    <ul>
        <li v-for="(item) in OBJ">
            <a href="#" @click="judge=item.id" :class="judge==item.id?'active':''"><span>{{ item.name }}</span></a>
        </li>
    </ul>
</div>
</template>

<script setup>
import { ref } from 'vue';

    let judge=ref(1);
    let OBJ=[
    {id:1,name:'艾尔登法环'},
    {id:2,name:'英雄联盟'},
    {id:3,name:'穿越火线'},]        
</script>

<style scoped>
    ul{
        display: flex;
        list-style: none;
    }
    ul li{
        border-top: 1px grey solid;
        border-bottom: 2px red solid;
    }
    ul li a{
        text-align: center;
        align-content: center;
        display: inline-block;
        height: 60px;
        width: 100px;
        text-decoration: none;
        color: black;
    }
    .active{
        background-color: red;
        color: white;
    }
</style>